<template>
	<view class="deaw-wrap">
		<view class="deaw-header" :style="{zIndex}">
			<block v-if="isExpandMenu">
				<view class="deaw-header-expand">
					<image class="logo-icon" src="@/static/appLog.png" mode="aspectFit"></image>
					<!-- <text class="app-name">KB 888</text> -->
					<waves @onTap="closeDrawer" itemClass="shrinkUpBtn">
						<image class="menu-image" style="transform: rotate(180deg);" src="@/static/image/open-menu.png">
						</image>
					</waves>
				</view>
			</block>
			<view class="deaw-header-noexpand" v-else>
				<waves @onTap="closeDrawer" class="shrinkUpBtn2">
					<image class="menu-image" src="@/static/image/open-menu.png"></image>
				</waves>
			</view>
		</view>
		<view class="mune-wrap">
			<view class="mune-cont">
				<waves :wavesHover="false"
					:class="['menu-item', curIndex === index ? 'menu-item-active' : '',{'menu-item-expand':!isExpandMenu}]"
					v-for="(item,index) in tabBars" :key="index" @onTap="menuClick(item,index)">
					<image v-show="curIndex !== index" class="icon-image" mode="aspectFit"
						:src="`${item.iconPath}-${theme}.png`">
					</image>
					<image v-show="curIndex === index" class="icon-image" mode="aspectFit"
						:src="`${item.selectedIconPath}-${theme}.png`">
					</image>
					<text v-show="isExpandMenu">{{item.text}}</text>
					<view v-if="!isExpandMenu" class="hoverItemText">{{ item.text }}</view>
				</waves>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		MAX_SIZEiZE,
		EXPAND_MENU_TRUE,
		EXPAND_MENU_FALSE
	} from '@/common/app.js'
	import {
		mapMutations,
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: {
			zIndex: {
				type: Number
			}
		},
		data() {
			return {
				rotate: false,
				tabBars: [{
						pagePath: "/pages/tabBar/home/index",
						iconPath: "/static/image/tabBar/home-inactive",
						selectedIconPath: "/static/image/tabBar/home-active",
						text: this.$t('Page.menu.home'),
					},
					{
						pagePath: "/pages/tabBar/invite/index",
						iconPath: "/static/image/tabBar/invite-inactive",
						selectedIconPath: "/static/image/tabBar/invite-active",
						text: this.$t('Page.menu.invite'),
						isLogin: true
					},
					{
						pagePath: "/pages/tabBar/notify/index",
						iconPath: "/static/image/tabBar/notify-inactive",
						selectedIconPath: "/static/image/tabBar/notify-active",
						text: this.$t('Page.menu.notify'),
						isLogin: true
					},
					{
						pagePath: "/pages/tabBar/mine/index",
						iconPath: "/static/image/tabBar/mine-inactive",
						selectedIconPath: "/static/image/tabBar/mine-active",
						text: this.$t('Page.menu.mine'),
						isLogin: true
					}
				],
			}
		},
		computed: {
			...mapState({
				isExpandMenu: state => state.app.isExpandMenu,
				homeData: state => state.app.homeData,
				theme: state => state.app.theme,
				curIndex: state => state.app.activeTab
			}),
			...mapGetters('app', ['isLogin']),
		},
		/**
		 *1. 在vuex中定义更新页面活动下标的元素，从缓存中获取，
		 * 2.侧边栏和底部tarBar共用同一个下标，保证由于宽度变化，当前的页面发生变化
		 * 3。在app.vue文件中使用watch监听，解决页面刷新页面失效的问题，使用监听
		 * */
		methods: {
			...mapMutations('app', ['setLeftPageWidth', 'saveActiveTab']),
			// 点击左边菜单栏
			menuClick(item, index) {
				// 保存当前激活菜单 
				if (item.isLogin && !this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				this.saveActiveTab(index)
				uni.setStorageSync('curMenuPagePath', item.pagePath);
				uni.switchTab({
					url: item.pagePath,
				})
			},

			goHome() {
				uni.switchTab({
					url: '/pages/component/view/view'
				})
			},

			// 关闭窗口
			closeDrawer() {
				let screenWidth = uni.getWindowInfo().windowWidth
				if (screenWidth >= MAX_SIZEiZE) {
					this.setLeftPageWidth()
				} else {
					this.$emit('closeDrawer')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deaw-wrap {
		height: 100Vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.deaw-header {
		position: relative;
		z-index: 6;
		height: 70px;
		background-color: var(--bg-8);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		padding-top: var(--status-bar-height);

		// 公共样式
		.menu-image {
			width: 18px;
			height: 20px;
		}

		.deaw-header-expand {
			width: 100%;
			display: flex;
			align-items: center;

			.logo-icon {
				width: 180px;
				height: 50px;
				border-radius: 10px;
			}

			.app-name {
				color: var(--color-white);
				font-size: 25px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				margin-left: 15px;
			}

			.shrinkUpBtn {
				position: absolute;
				right: 0;
				background: var(--bg-4);
				padding: 5px 10px 0;
				border-radius: 3px;
			}

		}

		.deaw-header-noexpand {
			width: 100%;
			display: flex;
			justify-content: center;

			.shrinkUpBtn2 {
				background: var(--bg-4);
				padding: 8px 12px;
				border-radius: .5rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}

	}

	.mune-wrap {
		height: calc(100vh - 70px);
		background-color: var(--bg-7);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 15px;
		box-sizing: border-box;

		/* 滚动条的滑块部分（滚动条的拖动部分） */
		&:hover ::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.2);
		}

		.mune-cont {
			height: 100%;
			overflow-y: auto;
			transition: all .2s ease;

			.menu-item {
				display: flex;
				align-items: center;
				color: var(--color-4);
				height: 60px;
				padding: 15px 25px 15px;
				font-size: 15px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				box-sizing: border-box;

				.icon-image {
					width: 28px;
					height: 28px;
					margin-right: 15px;
				}

				.hoverItemText {
					position: absolute;
					top: calc(-10%);
					left: 0;
					background: var(--bg-6);
					color: #fff;
					font-size: 12px;
					font-weight: 600;
					font-style: italic;
					text-shadow: 0px 2px 2px #B63712;
					transition: all .2s ease;
					padding: 2px 8px;
					border-radius: 5px;
					opacity: 0;
					z-index: 9;
				}

				&:hover {
					cursor: pointer;
					color: rgba(256, 256, 256, .6) !important;
					background: linear-gradient(90deg, #262D3E, rgba(38, 45, 62, .6), rgba(38, 45, 62, .3), rgba(38, 45, 62, .1));
					// background: var(--bg-6); 
				}
			}

			.menu-item-active {
				color: var(--color-3);
			}

			.menu-item-expand {
				position: relative;
				justify-content: center;
				overflow: visible;

				&:hover {
					background: transparent;
				}

				&:hover .hoverItemText {
					opacity: 1;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			/* 设置滚动条的颜色 */
			&::-webkit-scrollbar {
				width: 10px;
				// opacity: 0;
			}

			/* 滚动条的轨道部分（滚动条的背景） */
			&::-webkit-scrollbar-track {

				background: transparent;
				/* 设置滚动条轨道的背景颜色 */
			}

			/* 滚动条的滑块部分（滚动条的拖动部分） */
			&::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0);
				border-radius: 6px;
			}

			/* 滚动条的滑块部分（滚动条的拖动部分）在鼠标悬停时 */
			&::-webkit-scrollbar-thumb:hover {
				background: rgba(0, 0, 0, 0.3);
			}
		}
	}

	@media screen and (max-width: 768px) {
		.deaw-header {
			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
		}

		.shrinkUpBtn {
			position: relative;
			right: 0 !important;
		}
	}
</style>